<template>
	<div>
		<el-dialog
			title="风控设置"
			:visible="visible"
			:destroy-on-close="true"
			:before-close="handleClose"
			custom-class="dialog-model"
			width="30%"
			@close="handleClose"
		>
			<el-descriptions :column="2">
				<el-descriptions-item label="总代账号">
					{{ curData.proxyName || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="合营码">
					{{ curData.joinCode || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="所属商户">
					{{ curData.merchantName || '-' }}
				</el-descriptions-item>
				<el-descriptions-item label="信用等级">
					{{ getNumberValue(curData.creditLevel) }}
				</el-descriptions-item>
				<el-descriptions-item label="授信总额">
					{{
						handleNumber(curData.currency, curData.teamCreditTotal)
					}}
				</el-descriptions-item>
				<el-descriptions-item label="总代押金">
					{{
						handleNumber(
							curData.currency,
							curData.totalAgentDeposit
						)
					}}
				</el-descriptions-item>
				<el-descriptions-item label="团队净资产">
					<span :style="handleNumberColor(curData.netAssets)">
						{{
							handleNumber(
								curData.currency,
								curData.netAssets,
								2,
								true,
								true
							)
						}}
					</span>
				</el-descriptions-item>
				<el-descriptions-item label="德州场馆盈亏">
					<span :style="handleNumberColor(curData.dzVenueNetAmount)">
						{{
							handleNumber(
								curData.currency,
								curData.dzVenueNetAmount,
								2,
								true,
								true
							)
						}}
					</span>
				</el-descriptions-item>
				<el-descriptions-item label="其他场馆盈亏">
					<span :style="handleNumberColor(curData.otherVenueNetAmount)">
						{{
							handleNumber(
								curData.currency,
								curData.otherVenueNetAmount,
								2,
								true,
								true
							)
						}}
					</span>
				</el-descriptions-item>
			</el-descriptions>
			<h3 class="title">净资产风控</h3>
			<hr />
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				label-suffix=":"
				class="demo-ruleForm"
			>
				<el-form-item label="锁定方式" prop="netAssetsWindLockType">
					<el-select
						v-model="ruleForm.netAssetsWindLockType"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="(item, index) in netAssetsWindLockTypeList"
							:key="index"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="告警阈值"
					:rules="{
						required:
							ruleForm.netAssetsWindAlarmStatus == 1
								? false
								: true,
						message: '请输入告警阈值',
						trigger: 'blur'
					}"
				>
					<template slot="label">
						<span>告警阈值</span>
						<el-tooltip
							class="item"
							effect="dark"
							placement="top-start"
						>
							<span slot="content">
								总代团队净资产低于告警阈值将触发净资产告警。
							</span>
							告警阈值
							<i class="el-icon-question"></i>
						</el-tooltip>
					</template>
					<span>-$</span>
					<!-- <el-input-number
						v-model="ruleForm.netAssetsWindAlarmThreshold"
						:min="0"
						:max="9999999999.99"
						:precision="2"
						:controls="false"
						:disabled="windAlarmStatus"
					></el-input-number> -->
					<el-input
						v-model="ruleForm.netAssetsWindAlarmThreshold"
						:disabled="windAlarmStatus"
						v-input="{
							name: 'limitOnlyTwoNum',
							limit: 10,
							dotLimit: 2
						}"
						style="width: 180px"
					/>
					<el-checkbox
						v-model="ruleForm.netAssetsWindAlarmStatus"
						:true-label="1"
						:false-label="2"
						@change="handleChangeWindAlarm"
					>
						不限
					</el-checkbox>
				</el-form-item>
				<el-form-item
					v-if="ruleForm.netAssetsWindLockType == 0"
					label="锁定阈值"
					:rules="{
						required:
							ruleForm.netAssetsWindLockStatus == 1
								? false
								: true,
						message: '请输入锁定阈值',
						trigger: 'blur'
					}"
				>
					<template slot="label">
						<span>锁定阈值</span>
						<el-tooltip
							class="item"
							effect="dark"
							placement="top-start"
						>
							<span slot="content">
								总代团队净资产低于锁定阈值将触发净资产锁定。
							</span>
							锁定阈值
							<i class="el-icon-question"></i>
						</el-tooltip>
					</template>
					<span>-$</span>
					<!-- <el-input-number
						v-model="ruleForm.netAssetsWindLockThreshold"
						:min="0"
						:max="9999999999.99"
						:precision="2"
						:controls="false"
						:disabled="windLockStatus"
					></el-input-number> -->
					<el-input
						v-model="ruleForm.netAssetsWindLockThreshold"
						:disabled="windLockStatus"
						v-input="{
							name: 'limitOnlyTwoNum',
							limit: 10,
							dotLimit: 2
						}"
						style="width: 180px"
					/>
					<el-checkbox
						v-model="ruleForm.netAssetsWindLockStatus"
						:true-label="1"
						:false-label="2"
						@change="handleChangeWindLock"
					>
						不限
					</el-checkbox>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input
						type="textarea"
						v-model="ruleForm.remark"
						:autosize="{ minRows: 2 }"
						placeholder="请输入备注"
						maxlength="500"
						show-word-limit
						style="width: 365px"
					></el-input>
				</el-form-item>
				<el-form-item label="图片" prop="imageAddress">
					<UploadMany
						ref="imgUpload"
						:uploadAPI="uploadAPI"
						:limit="3"
						@setImageAddress="setImageAddress"
					></UploadMany>
					<p class="imgTip">
						{{ $t('agent.rule_upload_tip') }}
					</p>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetForm('ruleForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">
					确 定
				</el-button>
			</div>
		</el-dialog>
		<GoogleKeyInput
			:isShowdialog="isShowdialog"
			@getGoogleKey="getGoogleKey($event)"
			@backPrevStep="backPrevStep()"
		></GoogleKeyInput>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
  components: {
    UploadMany: () => import('@/components/UploadMany'),
    GoogleKeyInput: () => import('@/components/GoogleKeyInput')
  },
  mixins: [list],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    curData: {
      type: Object,
      default: () => { }
    },
    netAssetsWindLockTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShowdialog: false,
      ruleForm: {
        netAssetsWindAlarmThreshold: '',
        netAssetsWindAlarmStatus: 1,
        netAssetsWindLockThreshold: '',
        netAssetsWindLockStatus: 1,
        remark: '',
        imageAddress: null,
        netAssetsWindLockType: 0
      },
      rules: {
        netAssetsWindLockType: [
          { required: true, message: '请选择锁定方式', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      windAlarmStatus: false,
      windLockStatus: false
    }
  },
  computed: {
    fileSize() {
      return 5 * 1024 * 1024
    },
    uploadAPI() {
      return this.$api.imageUpload
    }
  },
  watch: {
    curData: {
      handler(newVal) {
        const netAssetsWindAlarmThreshold = newVal.netAssetsWindAlarmThreshold == null ? '' : (newVal.netAssetsWindAlarmThreshold > 0) ? newVal.netAssetsWindAlarmThreshold : (newVal.netAssetsWindAlarmThreshold * -1)
        const netAssetsWindLockThreshold = newVal.netAssetsWindLockThreshold == null ? '' : (newVal.netAssetsWindLockThreshold > 0) ? newVal.netAssetsWindLockThreshold : (newVal.netAssetsWindLockThreshold * -1)
        this.ruleForm = {
          netAssetsWindAlarmThreshold: netAssetsWindAlarmThreshold,
          netAssetsWindAlarmStatus: newVal.netAssetsWindAlarmStatus || 1,
          netAssetsWindLockThreshold: netAssetsWindLockThreshold,
          netAssetsWindLockStatus: newVal.netAssetsWindLockStatus || 1,
          remark: newVal.remark,
          imageAddress: null,
          netAssetsWindLockType: newVal.netAssetsWindLockType || 0
        }
        this.handleChangeWindAlarm(this.ruleForm.netAssetsWindAlarmStatus)
        this.handleChangeWindLock(this.ruleForm.netAssetsWindLockStatus)
      },
      immediate: true
    }
  },
  methods: {
    handleChangeWindAlarm(val) {
      if (val == 1) {
        this.ruleForm.netAssetsWindAlarmThreshold = ''
        this.windAlarmStatus = true
      } else {
        this.windAlarmStatus = false
      }
    },
    handleChangeWindLock(val) {
      if (val == 1) {
        this.ruleForm.netAssetsWindLockThreshold = ''
        this.windLockStatus = true
      } else {
        this.windLockStatus = false
      }
    },
    setImageAddress(imgList) {
      this.ruleForm.imageAddress =
        Array.isArray(imgList) && imgList.length > 0
          ? imgList.join(',')
          : undefined
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShowdialog = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.handleClose()
    },
    getGoogleKey(data) {
      this.isShowdialog = false
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const params = {
        haiyueAuthCode: data,
        imageAddress: this.ruleForm.imageAddress || '',
        merchantId: this.curData.merchantId,
        netAssetsWindAlarmStatus: this.ruleForm.netAssetsWindAlarmStatus,
        netAssetsWindAlarmThreshold: this.ruleForm.netAssetsWindAlarmThreshold * -1,
        netAssetsWindLockStatus: this.ruleForm.netAssetsWindLockStatus,
        netAssetsWindLockThreshold: this.ruleForm.netAssetsWindLockThreshold * -1,
        remake: this.ruleForm.remark,
        topProxyName: this.curData.proxyName,
        netAssetsWindLockType: this.ruleForm.netAssetsWindLockType || 0
      }

	  // 如果是手动锁定的情况下，自动锁定阈值不需要保存
	  if (params.netAssetsWindLockType === 1) {
		delete params?.netAssetsWindLockThreshold
	  }

      this.$api.windControllerCreditProxyEdit(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(
              this.$t('common.action_success')
            )
            this.handleClose()
            this.$emit('editSuccess')
          }
          loading.close()
        })
        .catch(() => {
          loading.close()
        })
    },
    backPrevStep() {
      this.isShowdialog = false
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleStartUpload() {
      this.$message.info(
        this.$t('funds.capital_adjustment.update_img_tip1')
      )
    },
    handleUploadSucess({ index, file, id }) {
      this.imageViewerSrc = file.imgUrl
      this.ruleForm.imageUrls = file.imgUrl
    },
    handleUploadDefeat() {
      this.ruleForm.imageUrls = ''
      this.$message.error(
        this.$t('funds.capital_adjustment.update_img_tip2')
      )
    },
    handleDeleteUpload() {
      this.ruleForm.imageUrls = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
	color: #02a7f0;
}
.dialog-footer {
	display: flex;
	justify-content: center;
}
::v-deep .dialog-model {
	min-width: 600px;
}
</style>
